<template>
  <div class='MonthEfficiency-container'>
    <div class='MonthEfficiency-header' :style='"height:" + headerHeight'>
      <div class='title'>
        月度综合能效
      </div>
    </div>
    <line-chart :loading='loading' id='MonthEfficiency' :height='`calc(100% - ${headerHeight})`' :xData='xData'
                :y-min='90'
                :areaStyle='{}'
                :yData='yData' />
  </div>
</template>

<script>
import LineChart from '@/business-components/charts/line.vue'

export default {
  props: {},
  components: {
    LineChart
  },
  data() {
    return {
      xData: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月'
      ],
      headerHeight: '40px',
      queryParam: {
        type: '0'
      },
      loading: false,
      yData: [
        140, 160, 120, 150, 156
      ]
    }
  },
  methods: {
    getData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.MonthEfficiency-container {
  width: 100%;
  height: 100%;

  .MonthEfficiency-header {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1A1A1A;
    }
  }
}
</style>